<template>
<!--人才测评-->
  <div class="content">
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>人才测评
      </div>
    </div>
    <div>
      <div class="auto first clearfix">
        <div class="pull-left">
          <img src="../../assets/ceping.png" alt="">
        </div>
        <ul>
          <li v-html="top.htmlContent"></li>
        </ul>
      </div>
    </div>
    <div class="two">
      <div class="auto">
        <ul class="pull-left">
          <li ><span v-html="bottom.htmlContent"></span></li>
        </ul>
        <p><img src="../../assets/ceping1.png" alt=""></p>
      </div>
    </div>
    <Button  size="large" class="btn" @click.stop="test"> 立即进入测评</Button>
    <div class="checkbox font14" style="padding-top: 10px">
      <Checkbox size="large" v-model="agree">测评即表示同意 <router-link to="/cepingxieyi">《人才测评协议》</router-link></Checkbox>
    </div>
    <Modal v-model="sure" title="购买人才能力测评" @on-ok="apply">
      <p>您尚未购买人才能力测评，是否前去购买？</p>
    </Modal>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
    <loginmodal  ref="loginB"></loginmodal>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }
  .content{
    background-color: #f5f5f5;
    .first,.two{
      text-align: left;
      margin-top: 30px;
      ul{
        margin-left: 550px;
        li{
          font-size: 14px;
          color: #666;
          line-height: 30px;
          margin-bottom: 30px;
        }
      }
      ul.pull-left{
        margin-left: 0;
        width: 435px;
        margin-right: 180px;
        margin-top: 35px;
      }
    }
    .two{
      background-color: #fff;
      padding: 40px 0;
    }
    .btn{
      /*background-color: #0a3c68;*/
      background-color: #957960;
      width: 355px;
      height: 60px;
      font-size: 16px;
      margin-top: 50px;
      color: #fff;
      a{
        color: #fff;
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    .checkbox{
      /*padding-top: 20px;*/
      /*font-size: 16px;*/
      color: #666;
      padding-bottom: 235px;
      a{
        color: #957960;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import loginmodal from '../template/loginmodal'
  import {abilityPage, centreInfoWeb, addOrder, getHtmlWeb,sliderPC} from '../../http'
  import {getStore} from '../../storage'
    export default {
        name: 'ceping',
        props: {},
        data() {
            return {
              ability:'',      //能力测评信息
              isBuy:2,         //是否购买
              agree:true,     //是否同意使用协议
              sure:false,     //是否前去购买
              top:'',         //人才测评上部文字
              bottom:'',      //人才测评下部文字
              isSpinShow:false,
              sliderImg:'',
            };
        },
        methods: {
          //购买人才测评
          apply(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //创建订单
                  addOrder({type: 'OT_APPRAISAL', targetId: 1, applyType: '3'}).then(res => {
                    this.isSpinShow = false;
                    if (res.code === 200) {
                      //跳转支付页面
                      this.$router.push({
                        name: 'buy',
                        query: {
                          orderId: res.data.orderId
                        }
                      })
                    } else {
                      this.$Notice.warning({
                        title: "人才测评提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  })
                } else {
                  this.isSpinShow = false;
                  this.$refs.loginB.showModal();
                }
              }).catch()
            }
          },
          //人才测评
          test() {
            //用户是否登录
            centreInfoWeb().then(res => {
              if(res.code === 200){
                //是否购买人才测评
                abilityPage().then(res => {
                  if(res.code === 200) {
                    this.ability = res.data.ability;
                    this.isBuy = res.data.isBuy;
                    //已购买测评，且同意协议
                    if (this.isBuy === 1 && this.agree) {
                      //是否编辑教育经历
                      if(res.data.education === 1){
                        this.$router.push({
                          name: 'ceping4'
                        })
                      }else{
                        this.$router.push({
                          name: 'ceping1'
                        })
                      }
                    }else{
                      if(!this.agree){
                        this.$Notice.warning({
                          title: "人才测评提醒",
                          desc: "请同意使用协议",
                          duration: 3,
                        });
                      }else{
                        if(this.isBuy === 0){
                          this.sure = true;
                        }
                      }
                    }
                  }
                }).catch()
              }else{
                this.$refs.loginB.showModal();
                this.$router.push({name:'ceping'});
              }
            }).catch()
          },
          getCeping(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //获取封面图
              sliderPC({sliderType:'4'}).then(res =>{
                this.sliderImg = res.data.slider.sliderImg;
              }).catch()
              getHtmlWeb({type: 'pcAppraisalTop'}).then(res => {
                if (res.code === 200) {
                  this.top = res.data.html;
                  getHtmlWeb({type: 'pcAppraisalBottom'}).then(res => {
                    this.isSpinShow = false;
                    if (res.code === 200) {
                      this.bottom = res.data.html;
                    } else {
                      this.$Notice.warning({
                        title: "人才测评提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: "人才测评提醒",
                    desc: res.info,
                    duration: 3,
                  });
                }
              }).catch()
            }
          }
        },
        created() {
          this.getCeping()
        },
        components: {
          headers,
          footers,
          carousel,
          loginmodal
        }
    }
</script>
